<template>
  <div class="img-container" @click="onClick">
    <img v-lazy="src" :class="isRound ? 'round':''" :src="loadingSrc" :data-src="src" alt />
  </div>
</template>

<script>
export default {
  props: {
    loadingSrc: {
      type: String,
      default: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3458475739,295617657&fm=26&gp=0.jpg'
    },
    src: {
      type: String,
      default: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3868887763,1961343052&fm=26&gp=0.jpg'
    },
    isRound: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick() {
      this.$emit('onImgClick')
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/_common.scss";
.img-container {
  @include wh;
  img {
    @include wh;
  }
  .round {
    border-radius: 50%;
  }
}
</style>
